<template>
  <div class="box">
    <a-card title="角色权限管理" :bordered="false" style="width: 100%;margin-top: 30px;">
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <template #id="{ text }">
          <a>{{ text }}</a>
        </template>
        <template #roles>
          <span>
            <smile-outlined />
            Name
          </span>
        </template>
        <template #role-admin>
          <span>
            <smile-outlined />
            Name
          </span>
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button type="primary" @click="editrole">编辑/权限</a-button>
            <a-button type="primary" danger @click="showDeleteConfirm">删除</a-button>
          </a-space>
        </template>
      </a-table>
      <div class="row">
          <div class="row-button">
            <a-button type="primary" @click="addrole">添加</a-button>
          </div>
          <div class="row-pagination">
            <a-pagination v-model:current="current1" show-quick-jumper :total="1" :show-total="total => `Total ${total} items`"
              @change="onChange" />
          </div>
        </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { defineComponent, onMounted, ref, reactive,createVNode, } from "vue"
import { useRouter } from "vue-router"
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
const columns = [

  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '角色',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '关联管理员',
    key: 'user_total',
    dataIndex: 'user_total',

  },
  {
    title: '操作',
    key: 'operator',
    dataIndex: 'operator',
    slots: { customRender: 'action' },
  },
];

const data = [
  {
    id: '1',
    name: '超级管理员',
    user_total: 5,

  },


];

export default {
  setup() {
    const router=useRouter()
    const current1 = ref(1);
    const onChange = (number) => {
      console.log('Page: ');
    };
    const addrole=()=>{
      router.push('/setting/adminrole/addrole')
    }
    const editrole=()=>{
      router.push('/setting/adminrole/editrole')
    }
    // 删除
    const showDeleteConfirm = () => {
      Modal.confirm({
        title: () => '提示',
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => '此操作将永久删除该数据, 是否继续?',
        okText: () => '确认',
        okType: 'danger',
        cancelText: () => '取消',
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    };
    return {
      data,
      columns,
      current1,
      onChange,
      addrole,
      editrole,
      showDeleteConfirm
    };
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
}
</script>

<style scoped>
.box {
  width: 90%;
  height: 100%;
  margin-left: 5%;
}
</style>